<script lang="ts" setup>
import type { FormInst } from 'naive-ui';
import { NSpace, useMessage } from 'naive-ui';
import { ref } from 'vue';
import type { Fn } from '@vueuse/core';
import * as validator from '@/utils/validator';
import { enumToOption } from '@/utils/enum';
import { isSuccess } from '@/utils/response';
import privilegeSelect from '@/views/system/privilege/modules/privilege-select.vue';
import { MenuType } from './enum';
import * as service from './api';
import menuSelect from './menu-select.vue';

const props = defineProps<{
  id: Fn;
  callback: Fn;
}>();

const message = useMessage();
const formInstRef = ref<FormInst | null>(null);
const dataForm = ref<any>({});
const showModal = ref(false);
const loading = ref<boolean>(false);
const menuOptions = enumToOption(MenuType);

const rules = {
  name: {
    required: true,
    validator: validator.roleName
  },
  value: {
    required: true
  },
  privileges: {
    required: true,
    validator: validator.privileges
  }
};

async function open() {
  showModal.value = true;
  loading.value = true;
  try {
    const response = await service.detail({ id: props.id() });
    if (isSuccess(response)) {
      dataForm.value = response.data;
    }
  } finally {
    loading.value = false;
  }
}

function close() {
  dataForm.value = {};
  showModal.value = false;
}

async function submit() {
  formInstRef.value?.validate((errors: any) => {
    if (!errors) {
      service.update(dataForm.value).then(response => {
        if (isSuccess(response)) {
          message.info('更新成功');
          close();
          if (props.callback) {
            props.callback();
          }
        }
      });
    }
  });
}
</script>

<template>
  <NButton type="info" @click="open()">编辑</NButton>
  <n-modal v-model:show="showModal">
    <NSpace vertical>
      <n-spin v-if="loading" size="small" />
      <n-card v-else title="编辑" class="card">
        <n-form ref="formInstRef" :label-width="80" :model="dataForm" :rules="rules" label-placement="left">
          <n-form-item label="上级:" path="parentId">
            <menu-select v-model:value="dataForm.parentId"></menu-select>
          </n-form-item>
          <n-form-item label="名称:" path="name">
            <n-input v-model:value="dataForm.name" type="text"></n-input>
          </n-form-item>
          <n-form-item label="类型:" path="type">
            <n-select v-model:value="dataForm.type" :options="menuOptions"></n-select>
          </n-form-item>
          <div v-if="dataForm.type !== 'Button'">
            <n-form-item label="路径:" path="path">
              <n-input v-model:value="dataForm.path" type="text"></n-input>
            </n-form-item>
            <n-form-item label="图标:" path="icon">
              <n-input v-model:value="dataForm.icon" type="text"></n-input>
            </n-form-item>
            <n-form-item label="排序:" path="order">
              <n-input-number v-model:value="dataForm.order" type="text"></n-input-number>
            </n-form-item>
          </div>
          <div v-else>
            <n-form-item label="权限:" path="path">
              <privilege-select v-model:value="dataForm.privileges"></privilege-select>
            </n-form-item>
          </div>
          <n-flex justify="end">
            <n-button @click="close()">取消</n-button>
            <n-button type="primary" @click="submit()">确定</n-button>
          </n-flex>
        </n-form>
      </n-card>
    </NSpace>
  </n-modal>
</template>

<style scoped>
.card {
  width: 450px;
}
</style>
